<template>
    {{ defaultNum.num.toFixed(0) }}
</template>
<script setup>
import { reactive,watch } from 'vue'
import gsap from 'gsap'

// 设置初始化数为0(滚动开始的数字)
// !!! 这里必须使用reactive,不能使用ref,因为gsap.to()方法只能对reactive对象进行操作,它需要对象里面有个属性num
const defaultNum = reactive({
    num: 0
})

// 获取从父组件传递过来需要滚动到的数字值
const props = defineProps({
    value: {
        type: Number,
        default: 0
    }
})

// 定义滚动动画函数
function AnimateToValue(){
    gsap.to(defaultNum,{duration: 0.5, num: props.value})
}

// 调用函数
AnimateToValue()

// 实时监听父组件传过来的值,执行函数
watch(() => props.value, () => {
    AnimateToValue()
})

</script>
